<template>
  <el-form
    :model="user"
    status-icon
    ref="user"
    label-width="100px"
    class="demo-ruleForm"
  >
    <h1 >登录</h1>
    <el-form-item label="账号" prop="username">
      <el-input v-model.number="user.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        v-model="user.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="loginUser">提交</el-button>
      <el-button @click="resetForm('user')">重置</el-button>
        <router-link to="/register">没有账号？立即注册</router-link>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
         user:{
           username:111111,
           password:11
         },
    
      };
    },
    methods: {
    async  loginUser(){
         const {data}  = await  this.$api.login.loginUser(this.user)
        console.log(data);
        if(data.code){
               this.$message({
                message: '登录成功',
                type: 'success'
              });
              localStorage.token=data.token
              this.$router.push('/home')
        }else{
         this.$message.error('登录失败');
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style scoped>
.el-form{
    width: 30%;
    height: 400px;
    margin: 100px auto;
    border: 1px solid black;
    padding: 20px;
    box-shadow: 0px 0px 8px 8px grey;
}
h1{
    text-align: center;
}
</style>